<template>
  <el-cascader v-model="sel" :options="options" clearable @change="handleChange" :props="{label: 'name', value: 'id', children: 'children', checkStrictly: true}"></el-cascader>
</template>
<script>
import { getTypeTree } from "@/api/eventType";
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  watch: {
    value: {
      handler(nv) {
        if(nv) {
          this.sel = nv.split(',').map(item => Number(item))
          if(this.options.length === 0) {
            this.getOptions()
          }
          this.$forceUpdate()
        }
      }
    }
  },
  data() {
    return {
      options: [],
      sel: []
    }
  },
  created(){
    this.getOptions()
  },
  methods: {
    handleChange(e) {
      this.$emit('input', e.join(','))
      this.$emit('change',e)
    },
    async getOptions() {
      try{
        const res = await getTypeTree();
        this.options = this.formatTrees(res.data);
      }catch(e) {
        console.log("e", e)
      }
    },
    formatTrees(data) {
      const dataList = structuredClone(data)
      function deep(_children) {
        _children.map(item => {
          if(!item.children || item.children.length === 0) {
            item.children = null
          }else{
            deep(item.children)
          }
        })
      }
      deep(dataList)
      return dataList;
    }
  }
 }
</script>
